<template>
  <div class="shopHome">
      <div class="shopHomeNavBar" v-for="(shophome,shoptit) in shophome" :key="shoptit">
          <van-nav-bar :title="shophome.title" left-arrow @click-left="goback">
          </van-nav-bar>
      </div>
      <div class="shopHomeInfo" v-for="(shophome,shoph) in shophome" :key="shoph">
          <div class="shopHomeLeft">
              <img :src="shophome.images">
          </div>
          <div class="shopHomeRight">
              <div class="shopHomeHand">
                  <span class="shopHomeTitle">{{shophome.title}}</span>
                  <span class="shopHomeRank">{{shophome.rank}}</span>
              </div>
              <div class="shopHomeShop">
                  <span>在售商品{{shophome.shop}}件</span>
              </div>
            </div>
              <div class="shopHomeBtn">
                  <van-button color="#00C657">关注</van-button>
              </div>
          </div>
          <div class="shopHomeTab">
              <van-tabs v-model="active" color="#00C657">
                <van-tab v-for="(tabList,shophtab) in tabList" :key="shophtab" :title="tabList">
                </van-tab>
              </van-tabs>
          </div>
          <div class="shopHomeShop">
              <auctionGoods :auctionGoods="auctionGoods"></auctionGoods>
          </div>
  </div>
</template>

<script>
import auctionGoods from "../../components/auctionGoods";
export default {
    name: "shopHome",
    data(){
        return{
            active: 0,
            tabList:["热销商品","团购商品","特价商品","拍卖商品"],
            shophome:[
                {"images":require("../../assets/images/home_banner.png"),
                 "title":"满天星旗舰店",
                 "shop":"122",
                 "rank":"花农",
                }
            ],
            auctionGoods: [
                {
                images: require("../../assets/images/home_pic(5).png"),
                title: "云南昆明基地直发玫瑰花鲜花批发",
                grade: "A级",
                dispark: "二度开放",
                length: "0.07毫米",
                num: "12束",
                market: "市场均价:￥10.0/束",
                inventory: "322",
                price: "￥6.6/束"
                },
                {
                images: require("../../assets/images/home_pic(5).png"),
                title: "云南昆明基地直发玫瑰花鲜花批发",
                grade: "A级",
                dispark: "二度开放",
                length: "0.07毫米",
                num: "12束",
                market: "市场均价:￥10.0/束",
                inventory: "322",
                price: "￥6.6/束"
                },
                {
                images: require("../../assets/images/home_pic(5).png"),
                title: "云南昆明基地直发玫瑰花鲜花批发",
                grade: "A级",
                dispark: "二度开放",
                length: "0.07毫米",
                num: "12束",
                market: "市场均价:￥10.0/束",
                inventory: "322",
                price: "￥6.6/束"
                },
                {
                images: require("../../assets/images/home_pic(5).png"),
                title: "云南昆明基地直发玫瑰花鲜花批发",
                grade: "A级",
                dispark: "二度开放",
                length: "0.07毫米",
                num: "12束",
                market: "市场均价:￥10.0/束",
                inventory: "322",
                price: "￥6.6/束"
                },
                {
                images: require("../../assets/images/home_pic(5).png"),
                title: "云南昆明基地直发玫瑰花鲜花批发",
                grade: "A级",
                dispark: "二度开放",
                length: "0.07毫米",
                num: "12束",
                market: "市场均价:￥10.0/束",
                inventory: "322",
                price: "￥6.6/束"
                },
            ]
        }
    },
    methods:{
        goback(){
            this.$router.go(-1);
        }
    },
    components:{
        auctionGoods,
    }
}
</script>

<style scoped>
.shopHomeInfo{
    display: flex;
    margin: 20px 16px;
}
.shopHomeLeft{
    
}
.shopHomeLeft img{
    width: 45px;
    height: 45px;
    border-radius: 25px;
}
.shopHomeRight{
    margin-left: 10px;
}
.shopHomeHand{

}
.shopHomeTitle{
    font-size:14px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:20px;
}
.shopHomeRank{
    background:rgba(255,98,0,1);
    border-radius:5px 0px 5px 0px;
    font-size:10px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
    margin-left: 8px;
    padding: 1px;
}
.shopHomeShop{
    margin-top: 5px;
}
.shopHomeShop span{
    font-size:10px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:20px;
}
.shopHomeBtn{
    margin-left: 80px;
    margin-top: 10px;
}
.shopHomeBtn button{
    width:70px;
    height:27px;
    border-radius:3px;

}
</style>